<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <a-drawer
    title="详情"
    :visible="visible"
    @close="cancel"
    :body-style="{ paddingBottom: '80px' }"
    :width="750"

  >
    <a-comment style="margin-bottom: -20px" v-loading="loading">
      <template slot="actions">
        <!--      <span key="comment-basic-like">-->
        <!--        <a-tooltip title="Like">-->
        <!--          <a-icon type="eye"/>-->
        <!--        </a-tooltip>-->
        <!--        <span style="padding-left: 8px;cursor: auto">-->
        <!--          {{ info.data.likecount }}-->
        <!--        </span>-->
        <!--      </span>-->

        <!--        <span key="comment-basic-like">-->
        <!--        <a-tooltip title="Like">-->
        <!--          <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like"/>-->
        <!--        </a-tooltip>-->
        <!--        <span style="padding-left: 8px;cursor: auto">-->
        <!--          {{ info.data.likecount }}-->
        <!--        </span>-->
        <!--      </span>-->

      </template>
      <a slot="author">
        {{ info.data.username }}<br/>
        {{ info.data.name }}-{{ info.data.idcard }}
        <a-icon v-if="info.data.gender==1" type="man" style="color: blue"/>
        <a-icon v-if="info.data.gender==2" type="woman" style="color: deeppink"/>
      </a>
      <a-avatar slot="avatar" :src="info.data.userimg"/>
      <p slot="content">{{ info.data.content }}</p>
      <p slot="content" v-if="info.data.idcardimgfront">
        <el-image fit="scaleDown" v-for="item in info.data.idcardimgfront.split(',')"
                  :src="item" :preview-src-list="[item]" style="width:200px">
        </el-image>
        <el-image fit="scaleDown" v-for="item in info.data.idcardimgreverse.split(',')"
                  :src="item" :preview-src-list="[item]" style="width:200px">
        </el-image>
      </p>
      <p slot="content" v-if="info.data.imgcontent">
        <el-image fit="scaleDown" v-for="item in info.data.imgcontent.split(',')"
                  :src="item" :preview-src-list="[item]" style="width:200px">
        </el-image>
      </p>

      <p slot="content">
        <video width="320" height="240" controls :src="info.data.viedeocontent"></video>

      </p>


      <a-tooltip slot="datetime" :title="info.data.createtime">
        <span>{{ info.data.createtime }}</span>
      </a-tooltip>

      <el-divider></el-divider>

      <a-comment style="margin-top: -25px; margin-bottom: -25px; " v-for="item in info.datalist">
        <a slot="author">{{ item.followUpUserName }}
          <a-icon v-if="item.gender==1" type="man" style="color: blue"/>
          <a-icon v-if="item.gender==2" type="woman" style="color: deeppink"/>
        </a>
        <a-avatar slot="avatar" :src="item.followUpUserImg"/>
        <a-tooltip slot="datetime"><span>{{ item.createTime }} <el-tag type="danger"
                                                                       @click="deleteHandle(item.id)">删除</el-tag> <el-tag
          @click="replyUser(item)">回复</el-tag></span></a-tooltip>
        <p slot="content">{{ item.content }}</p>

        <a-comment v-for="child in item.datalist" style="margin-top: -38px;">
          <a slot="author">{{ child.followUpUserName }}
            <a-icon v-if="child.gender==1" type="man" style="color: blue"/>
            <a-icon v-if="child.gender==2" type="woman" style="color: deeppink"/>
          </a>
          <a-avatar slot="avatar" :src="child.followUpUserImg"/>
          <p slot="content">
            <a-tag>@{{ child.pUserName }}</a-tag>
            {{ child.content }}
          </p>
          <a-tooltip slot="datetime">
            <span>{{ child.createTime }} <el-tag type="danger" @click="deleteHandle(child.id)">删除</el-tag> <el-tag
              @click="replyUser(child)">回复</el-tag> </span>
          </a-tooltip>
        </a-comment>
      </a-comment>
    </a-comment>

    <a-comment>
      <!--        <a-avatar-->
      <!--          slot="avatar"-->
      <!--          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"-->
      <!--        >-->
      <!--          <a-icon class="" type="man" style="color: blue"/>-->
      <!--        </a-avatar>-->

      <div slot="content">

        <el-select v-model="reply.status" placeholder="请选择认证状态" style="width: 690px" filterable clearable>
          <el-option
            v-for="item in selOptions.authStatus2"
            :key="item.value"
            :value="item.value"
            :label="item.label">
          </el-option>
        </el-select>


        <!--          <el-date-picker-->
        <!--           v-model="reply.createtime"-->
        <!--            type="date"-->
        <!--            format="yyyy-MM-dd HH:mm:ss"-->
        <!--            value-format="yyyy-MM-dd HH:mm:ss"-->
        <!--            placeholder="选择日期" style="width: 320px;margin-left: 10px">-->
        <!--          </el-date-picker>-->

        <!--        <el-date-picker-->
        <!--          v-model="reply.createtime"-->
        <!--          type="datetime"-->
        <!--          value-format="yyyy-MM-dd HH:mm:ss"-->
        <!--          placeholder="选择日期" style="width: 320px;margin-left: 10px">-->
        <!--          >-->
        <!--        </el-date-picker>-->


        <a-form-item>
          <a-textarea :rows="4" v-model="reply.remark" :placeholder="placeholderMsg"/>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
            审核
          </a-button>
        </a-form-item>
      </div>
    </a-comment>


  </a-drawer>
</template>

<script>
import api from '@/api/api'

export default {
  components: {},
  data() {
    return {
      submitting: false,
      likes: 0,
      selOptions: {},
      dislikes: 0,
      action: null,
      userDataList: [],
      visible: false,
      loading: false,
      info: {
        data: {},
        datalist: []
      },
      placeholderMsg: '请输入回复内容',
      reply: {
        id: '',
        userid: '',
        status: '',
        remark: ''
      },
      dataForm: {
        cid: 0,
        adminid: '',
        cuuid: '',
        content: ''
      },
      dataRule: {
        cuuid: [
          { required: true, message: '生成的随机id  为必填项', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容  为必填项', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {

    like() {
      this.likes = 1
      let postData = Object.assign({}, {})
      postData.fid = this.dataForm.cid
      api.post('rest/vabc/friendsCircleReply/like', postData).then(res => {
        //this.info = res;
        this.info.data.dz = res.dz
        this.info.data.visit = res.visit
      }).finally(() => {
      })
    },

    dislike() {
      this.likes = 0
      this.dislikes = 1
      this.action = 'disliked'
    },

    init(id, adminid) { // 初始化表单验证规则
      console.error(id)
      this.reply.fid = id
      this.selOptions = this.$constants.selOptions

      this.dataForm.cid = id
      this.dataForm.adminid = adminid
      this.visible = true
      this.$nextTick(() => {
        // this.$refs['dataForm'].resetFields()
        if (this.dataForm.cid) {
          this.loading = true
          let postData = Object.assign({}, {})
          postData.id = this.dataForm.cid
          postData.pageSize = 100
          api.post('rest/vabc/actorauth/getDetail', postData).then(res => {
            console.log(res)
            this.info = res
            this.reply.id = res.data.id
            this.reply.userid = res.data.userid
            console.log(this.info)

          }).finally(() => {
            this.loading = false
            this.dataListLoading = false
          })
        }
      })
      // this.getUserDataList()
    },
    handleChange() {
    },
    // 表单数据提交
    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          let postData = Object.assign({}, this.dataForm)
          if (!this.dataForm.cid) {
            postData.cid == undefined
            api.post('rest/vabc/friendsCircle/save', postData).then(res => {
              this.$message.success('创建成功')
              this.reset()
              this.visible = false
              this.$parent.getDataList()
            }).finally(() => {
              this.loading = false
            })
          } else {
            api.post('rest/vabc/friendsCircle/update', postData).then(res => {
              this.$message.success('保存成功')
              this.reset()
              this.visible = false
              this.$parent.getDataList()
            }).finally(() => {
              this.loading = false
            })
          }
        }
      })
    },
    cancel() {
      this.visible = false
      this.reset()
    },
    reset() {
      // this.$refs.info.resetFields()
      this.$data.dataForm = JSON.parse(JSON.stringify(this.$options.data().dataForm))
      this.info = {
        data: {},
        datalist: []
      }
      //图片回写
      //this.$refs["childData"].fileList=[]
    },

    getUserDataList() {
      // this.dataListLoading = true
      // this.dataListLoading = true
      // let postData={
      //   'order':'desc',
      //   'column':'createtime',
      //   'userexist':1,
      //   'pageSize':1000
      // }
      // Object.assign(postData)
      // api.post('rest/vabc/userEntity/list',postData).then(res => {
      //   this.userDataList=res.datalist
      // }).finally(() => {
      //   this.dataListLoading = false
      // });
    },
    replyUser(item) {
      this.reply.pid = item.id
      this.placeholderMsg = '请输入想回复 ' + item.followUpUserName + ' 的内容'
    },
    reload() {
      this.loading = true
      let postData2 = Object.assign({}, {})
      postData2.cid = this.dataForm.cid
      postData2.fid = this.dataForm.cid
      postData2.pageSize = 100
      api.post('rest/vabc/friendsCircle/getFriendsCircleReplyListByFid', postData2).then(res => {
        this.info = res
      }).finally(() => {
        this.loading = false
      })
    },
    handleSubmit() {
      this.submitting = true
      console.log(this.reply)
      let postData = {}
      Object.assign(postData, this.reply)
      if (!postData.status) {
        this.$message.warning('请选择认证状态')
        this.submitting = false
        return
      }
      api.post('rest/vabc/actorauth/update', postData).then(res => {
        this.$message.success('保存成功')
        this.reset()
        this.visible = false
        this.$parent.getDataList()
      }).finally(() => {
        this.submitting = false
      })
    },
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.cid
      })
      this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let postData = { ids: ids.join(',') }
        api.post('rest/vabc/friendsCircleReply/delete', postData).then(res => {
          this.$message.success('删除成功')
          this.reload()
        })
      })
    }
  }
}
</script>
